<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-08 13:51:37
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.ransom-money
  .content.flex.column.align-center
    img.my6(:src="FrameBlue")
    .title.bold.mb6 
      |
      |
      |
      span 本次履约完成，您可赎回
      span.overdue {{ have_money }}
      span 元人民币，是否赎回?
    .tip.mb6 退款成功，您的易链值即将扣除 {{ have_money }}，如您使用支付宝/微信还款，将会为您原路返回，如您使用对公转账付款，请联系平台为您线下退款
    .flex.justify-center.mt4.mb4
      el-button.btn(
        type="primary",
        size="large",
        plain,
        @click="onCancel(formRef)"
      ) 取消
      el-button.btn(type="primary", size="large", @click="onConfirm(formRef)") 确定
</template>

<script setup>
import { onMounted, ref } from "vue";
import FrameBlue from "@/assets/images/FrameBlue.png";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { OrderGuaranteeRedeem } from "@/api/common";
const router = useRouter();
const route = useRoute();

onMounted(() => {
  have_id.value = route.query.id;
  have_money.value = route.query.money;
  type.value = route.query.type;
});

const have_money = ref("");
const have_id = ref("");
const type = ref("");

// 确定
const onConfirm = () => {
  OrderGuaranteeRedeem({ id: have_id.value }).then((res) => {
    if (res.code == 1) {
      ElMessage({ message: res.msg, type: "success" });
      router.push("/easy-quota");
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "warning" });
      router.push("/easy-quota");
    }
  });
};
// 取消
const onCancel = (formEl) => {
  router.push("/easy-quota");
};
// 立即支付
const onPay = () => {
  if (form.value.payment == "3") {
    router.push({
      path: "/corporate-transfer",
      query: {
        money: have_money.value,
        type: type.value,
        id: have_id.value,
      },
    });
  }
  console.log("支付方式", form.value.payment);
};
</script>

<style lang="stylus" scoped>
.ransom-money {
  background: #ffffff;
  height: 100%;

  .content {
    width: 1200px;
    margin: 0 auto;

    .title {
      font-size: 24px;
    }

    .tip {
      line-height: 20px;
      color: #18BC9F;
      font-size: 12px;
    }

    .btn {
      width: 140px;
    }

    .overdue {
      color: #E84026 !important;
    }

    .refund {
      color: #18BC9F;
    }
  }
}
</style>
  